<template>
  <div class="categorise-container">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <el-button type="primary" @click="openAddCateDialog">添加分类</el-button>

      <el-table
        :data="categoriesList.result"
        border
        stripe
        row-key="cat_id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column label="分类名称" prop="cat_name"></el-table-column>
        <el-table-column label="是否有效" prop="cat_deleted">
          <template slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="!scope.row.cat_deleted"
              style="color: lightgreen"
            ></i>
            <i class="el-icon-error" v-else style="color: red"></i>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="cat_level">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.cat_level === 0"
              >一级</el-tag
            >
            <el-tag type="success" v-else-if="scope.row.cat_level === 1"
              >二级</el-tag
            >
            <el-tag type="warning" v-else>三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              type="primary"
              size="mini"
              @click="openEditDialog(scope.row.cat_id)"
              >编辑</el-button
            >
            <el-button
              icon="el-icon-delete"
              type="danger"
              size="mini"
              @click="deleteCate(scope.row.cat_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="this.categoriesList.total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加分类对话框 -->
    <AddCateDialog @updateList="getCategories"></AddCateDialog>
    <!-- 修改分类对话框 -->
    <EditCateDialog :id="EditId" @updateList="getCategories"></EditCateDialog>
  </div>
</template>

<script>
import AddCateDialog from '@/components/goods_cate/AddCateDialog.vue'
import EditCateDialog from '@/components/goods_cate/EditCateDialog.vue'
export default {
  name: 'Categories',
  data() {
    return {
      categoriesList: [],
      pageNum: 1,
      pageSize: 5,
      EditId: 0,
      EditCateDialogVisible: false
    }
  },
  methods: {
    async getCategories() {
      const { data: res } = await this.$http.get('categories', {
        params: { pagenum: this.pageNum, pagesize: this.pageSize }
      })

      this.categoriesList = res.data
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.getCategories()
    },
    openAddCateDialog() {
      this.$store.commit('cate/AddCateDialogVisibleState', true)
    },
    deleteCate(id) {
      this.$confirm('是否删除该分类？', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$http
            .delete('categories/' + id)
            .then(({ data: res }) => {
              if (res.meta.status !== 200) {
                return this.$message.error('删除失败！')
              }

              this.$message.success('删除成功！')
              this.getCategories()
            })
            .catch((err) => err)
        })
        .catch((err) => err)
    },
    openEditDialog(id) {
      this.$store.commit('cate/EditCateDialogVisibleState', true)
      this.EditId = id
    }
  },
  created() {
    this.getCategories()
  },
  components: { AddCateDialog, EditCateDialog }
}
</script>

<style></style>
